var drawing = document.getElementById('drawing')
if (drawing.getContext) {
  var context = drawing.getContext('2d')
  // 开始绘制路径
  context.beginPath()
  // 绘制外圆
  context.arc(100, 100, 99, 0, 2 * Math.PI, false)
  // 绘制内圆
  context.moveTo(194, 100) // 绘图游标移动到这里，准备从这里开始画
  context.arc(100, 100, 94, 0, 2 * Math.PI, false)

  // 变换原点
  context.translate(100, 100)
  
  // 旋转  
  context.rotate(1)

  // 绘制分针
  context.moveTo(0, 0)
  context.lineTo(0, -85)  // 注意坐标系统的方向

  // 绘制时针
  context.moveTo(0, 0)
  context.lineTo(-65, 0)

  // 描边放在最后一步，才能显示出来之前勾勒的图案
  context.stroke()

}